
<template>
    <div>
        <Title :title='title'></Title>
        <div ref="bottom3" style="height: 150px; padding-top: 25px;"></div>
    </div>
</template>

<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request'
import Title from './Title.vue';
export default {
    components: {
        Title
    },
    data() {
        return {
            title: '系统统计概览',
            Data: []
        }
    },

    methods: {
        loadLine() {
            const columnPlot = new Column(this.$refs.bottom3, {
                data: this.Data,
                xField: 'type',
                yField: 'value',
                height: 120,
                columnStyle: {
                    radius: [4, 4, 0, 0],
                },
                xAxis: {
                    label: {
                        style: {
                            fill: 'white',
                            fontSize: 10
                        }
                    }
                },
                yAxis: {
                    label: {
                        style: {
                            fill: 'white',
                            fontSize: 10
                        }
                    }
                },
                color: '#1890ff',
                margin: [20, 10, 10, 10]
            });
            columnPlot.render();
        },
        async getTempData() {
                let res = await get('/count/countAll');
                console.log(res, '获取统计数据');
                    this.Data = res.data;
        }
    },
    async mounted() {
        await this.getTempData();
        this.loadLine();
    }
}
</script>
<style scoped></style>
